<template>
  <div style="padding: 20px;">
    <el-breadcrumb separator="/" style="margin-bottom: 20px">
      <el-breadcrumb-item >当前位置：</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a >菜单管理</a></el-breadcrumb-item>
    </el-breadcrumb>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card style="height: calc(100vh - 150px);overflow: auto;border-radius: 10px 10px 10px 10px">
          <span style="font-size: 13px">菜单名称：</span><el-input style="width:200px" v-model="queryParams.name" size="small" placeholder="请输入菜单名" clearable></el-input>
          <el-button type="primary" icon="el-icon-search" size="small" @click="getMenu">查询</el-button>
          <el-button type="success" icon="el-icon-plus" size="small" @click="open" style="text-align: right">新增菜单</el-button>
          <van-divider dashed></van-divider>
          <el-table size="small" :data="tableData" highlight-current-row @current-change="getCurrentChange"  row-key="id" default-expand-none style="width: 100%">
            <el-table-column property="name" label="菜单名称" min-width="150"></el-table-column>
            <el-table-column property="description" label="描述" ></el-table-column>
            <el-table-column  label="操作" width="300"   fixed="right" >
              <template slot-scope="scope">
                <el-button type="text" size="mini" icon="el-icon-plus"  @click="addchildren(scope.row.id)" v-if="!scope.row.pid&&!scope.row.path">新增子菜单</el-button>
                <el-button type="text" size="mini"  icon="el-icon-edit"  @click="edit(scope.row)" style="margin-left: 0px;color: #E6A23C">编辑</el-button>
                <el-button type="text" slot="reference"   size="mini" style="margin-left: 0px;color: red" icon="el-icon-delete-solid" @click="delete1(scope.row)">删除</el-button>

              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card  v-if="!menuId" style="height: calc(100vh - 150px);overflow: auto;border-radius: 10px 10px 10px 10px">
        <el-empty description="暂无数据，请点击左侧菜单" :image-size="200" style="margin-top: 30%"></el-empty>
        </el-card>
        <el-card  v-if="menuId" style="height: calc(100vh - 150px);overflow: auto;border-radius: 10px 10px 10px 10px">
          <div style="text-align: right">
            <el-button type="primary" @click="addPression" style="margin-bottom: 10px">添加权限</el-button>
          </div>
          <el-table :data="buttonDate" size="small">
            <el-table-column prop="unikey" label="权限唯一标识" ></el-table-column>
            <el-table-column prop="name" label="权限名称" ></el-table-column>
            <el-table-column prop="menuname" label="所属菜单"  ></el-table-column>
            <el-table-column prop="comment" label="备注"  ></el-table-column>
            <el-table-column  label="操作"  width="120" fixed="right">
              <template slot-scope="scope">
                <el-button type="text" size="mini" icon="el-icon-edit"  @click="update2(scope.row)" >修改</el-button>
                <el-button type="text" slot="reference"   size="mini" style="margin-left: 0px;color:red" icon="el-icon-delete-solid" @click="deletepression(scope.row)">删除</el-button>

              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <!--    新增、编辑-->
    <el-dialog :visible.sync="ifshow" :title="title" style="" custom-class="my-dialog">
      <el-form :model="adddata" :rules="rules" ref="adddata" label-width="100px" class="demo-ruleForm">
        <el-form-item label="名称" prop="name">
          <el-input v-model="adddata.name"></el-input>
        </el-form-item>
        <el-form-item label="路径" prop="path">
          <el-input v-model="adddata.path"></el-input>
        </el-form-item>
        <el-form-item label="页面路径" prop="pagePath">
          <el-input v-model="adddata.pagePath"></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="sequence">
          <el-input-number v-model="adddata.sequence"  :min="1" :max="1000" label="描述文字"></el-input-number>
        </el-form-item>
        <el-form-item label="图标" prop="icon">
          <template slot-scope="scope">
            <el-select v-model="adddata.icon" placeholder="请选择">
              <el-option v-for="item in options" :key="item.name" :label="item.name" :value="item.value">
                <i :class="item.value" style="margin-right: 10px"/>{{item.name}}
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="adddata.description"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit('adddata')">立即提交</el-button>
          <el-button @click="ifshow=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!--    删除-->
    <el-dialog :visible.sync="ifdelete" title="删除" width="500px">
      <div style="text-align: center;font-size: 20px">确定删除该数据?</div>
      <div style="text-align: center;margin-top: 20px">

        <el-button type="danger" @click="sure">确定</el-button>
        <el-button type="primary" @click="ifdelete=false">取消</el-button>
      </div>
    </el-dialog>
    <!--    删除权限-->
    <el-dialog :visible.sync="ifdeletepression" title="删除" width="500px">
      <div style="text-align: center;font-size: 20px">确定删除该权限?</div>
      <div style="text-align: center;margin-top: 20px">

        <el-button type="danger" @click="deletepressionsure">确定</el-button>
        <el-button type="primary" @click="ifdeletepression=false">取消</el-button>
      </div>
    </el-dialog>
    <!--    新增和修改权限-->
    <el-dialog :visible.sync="ifupdateoraddpression" title="修改" width="600px">
      <el-form :model="pressionData"  label-width="100px" class="demo-ruleForm">
        <el-form-item label="权限唯一标识" prop="unikey">
          <el-input v-model="pressionData.unikey"></el-input>
        </el-form-item>
        <el-form-item label="权限名称" prop="name">
          <el-input v-model="pressionData.name"></el-input>
        </el-form-item>
<!--        <el-form-item label="所属菜单" prop="menuname">-->
<!--          <el-input v-model="pressionData.menuname" :disabled="true"></el-input>-->
<!--        </el-form-item>-->
        <el-form-item label="描述" prop="comment">
          <el-input v-model="pressionData.comment"></el-input>
        </el-form-item>
      </el-form>

      <div style="text-align: center;margin-top: 20px">
        <el-button type="danger" @click="updateoraddsure">确定</el-button>
        <el-button type="primary" @click="ifupdateoraddpression=false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Vue from 'vue';
import { Divider } from 'vant';

Vue.use(Divider);
import request from "../utils/request";
export default {
  data(){
    return{
      ifupdateoraddpression:false,
      ifdeletepression:false,
      title:'',
      menuId:null,
      menu:{},
      pressionData:{},//新增、修改权限对象
      buttonDate:[],
      //数据
      adddata:{},
      //规则
      rules: {
        id: [
          { required: true, message: '请输入', trigger: 'blur' },
        ],
        name: [
          { required: true, message: '请输入', trigger: 'blur' },
        ],
      },
      ifshow:false,
      total:0,
      tableData:[{}],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name:undefined,
      },
      deleteid:'',
      ifdelete:false,
      options:[],
    }
  },
  created() {
    this.getMenu()
  },
  methods:{
    //查询权限
    getPremissions(i){
      request.post('/getPremissions',i).then(resp=>{
        this.buttonDate=resp.data
      })
    },
    //新增子菜单
    addchildren(row){
      request.post('/getDict',this.queryParams).then(resp=>{
        if (resp.code===200){
          this.options=resp.list
        }
      })
      this.title='新增'
      this.clear1()
      this.ifshow=true;
        this.adddata.pid=row

    },
    sure(){
      let url='/deleteMenu'
      let param={
        id:this.deleteid
      }
      request.post(url,param).then(resp=>{
        if (resp.code===200){
          this.getMenu()
          this.ifdelete=false
          this.message(resp.errorMessage,'success')
        }
      })
    },
    //删除
    delete1(i){
      this.ifdelete=true
      this.deleteid=i.id
    },
    //编辑
    edit(i){
      request.post('/getDict',this.queryParams).then(resp=>{
        if (resp.code===200){
          this.options=resp.list
        }
      })
      console.log(i)
      this.ifshow=true
      this.title='编辑菜单'
      this.adddata={
        id:i.id,
        name:i.name,
        path:i.path,
        icon:i.icon,
        description:i.description,
        pagePath:i.pagePath,
        sequence:i.sequence
      }
    },
    open(){
      this.clear1()
      this.ifshow=true
      this.title='新增菜单'
    },
    //修改或者新增权限
    updateoraddsure(){
      this.pressionData.menuId=this.menuId
      request.post('/updateoraddpression',this.pressionData).then(resp=>{
        if (resp.code===200){
          this.ifupdateoraddpression=false
          this.getPremissions(this.menu)
          this.message(resp.errorMessage,'success')
        }else {
          this.message(resp.errorMessage,'error')
        }
      })
    },
    //删除权限
    deletepressionsure(){
      request.post('/deleteButton',{id:this.deleteid}).then(resp=>{
        this.ifdeletepression=false
        this.getPremissions(this.menu)
        this.message(resp.errorMessage,'success')
      })
    },
    //删除按钮权限
    deletepression(row){
      this.deleteid=row.id
      this.ifdeletepression=true
    },
    //新增权限按钮
    addPression(){
      this.pressionData={}
      this.ifupdateoraddpression=true
    },
    //修改按钮权限
    update2(row){
      this.pressionData=row
      this.ifupdateoraddpression=true
    },
    //清楚数据
    clear1(){
      this. adddata={}
    },
    //添加
    onSubmit(i){
      let url='/addMenu'
      this.$refs[i].validate((valid) => {
        if (valid) {
          request.post(url, this.adddata).then(resp => {
            if (resp.code === 200) {
              this.getMenu()
              this.ifshow = false

              this.message(resp.errorMessage, 'success')
            } else {
              this.message(resp.errorMessage,'error')
            }
          })
        }else{
          this.message("请填写完整", 'error')
        }


      });
    },
    //分页
    handleSizeChange(val){
      this.queryParams.pageSize = val;
      this.queryParams.pageNum = 1;
      this.getMenu()
    },
    handleCurrentChange(val){
      this.queryParams.pageNum = val;
      this.getMenu()
    },
    getMenu(){
      let url='/getMenu'
      request.post(url,this.queryParams).then(resp=>{
        if (resp.code===200){
          this.tableData=resp.list
          this.total=resp.total
        }
      }).catch(err=>{
        this.message(err,'error')
      })
    },
    getCurrentChange(val) {
      this.menuId=val.id
      this.menu=val
      this.getPremissions(val)
    },

  }
}
</script>

<style scoped>
>>> .el-table th.el-table__cell {
  background-color: #f4f4f4!important;
  color: black!important;
  font-size: 14px!important;
  height: 48.8px;
}
>>> .my-dialog {
  /*position: fixed;*/
  z-index: 30000;
}
>>> .fontSize12{
  font-size: 14px;
}
>>> .fontSize18{
  font-size: 20px;
}
>>> .el-dialog{
  border-radius: 10px 10px 10px 10px;
}
>>> .el-dialog__header {
  background-color: #66b1ff;
  border-radius: 10px 10px 0px 0px;
}
>>> .van-divider{
  border-color: #bbbbbb!important;
}
</style>
